<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品类型</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/inputfile.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/datagrid-detailview.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/template-native.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/other.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#articlelist').datagrid({
                title:"物品类型列表",
                pagination: true,
                iconCls: 'icon-save',
                remoteSort:false,
                singleSelect:true,
                nowrap:false,
                fitColumns:true,

                url: '${pageContext.request.contextPath}/articletypes/findByPage',
                // data: {
                //     total: 20,
                //     rows: [
                //         { 'id': 1, 'name': '数码产品'},
                //         { 'id': 2, 'name': '书籍'},
                //         { 'id': 3, 'name': '衣服'},
                //     ]
                // },
                columns: [
                    [
                        {field: 'id', title: '类型编号',  width: '20%', align: 'center'},
                        {field: 'name', title: '类型名称', width: '20%', align: 'center'}
                    ]
                ],
                toolbar: "#tb",
                pagination: true,
                pageSize: 20,
                singleSelect: true,
                pageList: [5,10,20],
                
            });

            $("#dd").dialog({
                title: '新增类型',
                width: 400,
                height: 300,
                closed: true,
                cache: false,
                href: '',
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text:'添加',
                    iconCls:'icon-ok',
                    handler:function(){
                        addType();
                        $("#dd").dialog("close");
                    }
                },{
                    text:'关闭',
                    iconCls:'icon-no',
                    handler:function(){
                        $("#dd").dialog("close");
                    }
                }]
            });

            $("#mm").dialog({
                title: '修改类型',
                closed:true,
                cache: false,
                width:400,
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text:'修改',
                    iconCls:'icon-ok',
                    handler:function(){
                        modiftType();
                        $('#articlelist').datagrid("reload");
                        $("#mm").dialog("close");
                    }
                },{
                    text:'关闭',
                    handler:function(){
                        $("#mm").dialog("close");
                    }
                }]
            });

            $('#article_type_modify').click(function () {
                var row = $('#articlelist').datagrid('getSelected');
                if(row==null){
                    alert('请先选择要修改的产品类型')
                    return;
                }
                $("#mm").dialog('open');
                $.ajax({
                    url: '${pageContext.request.contextPath}/articletypes/findById',
                    method: 'post',
                    data: {id: row.id},
                    type: 'json',
                    success: function(result){
                        if (result.code ==500){
                            alter(result.msg);
                        }
                        $("#id_modify").val(result.data.id);
                        // $('#id_modify').textbox('setValue',result.data.id);
                        $('#name_modify').textbox('setValue',result.data.name);
                        $('#img_modify')[0].src ="http://192.168.4.8:8080/"+result.data.imgurl;
                        // $('#img_modify').attr("src", "http://192.168.4.8:8080/"+result.data.imgurl);
                    }
                })
            });

        });

        function changeImgAdd(obj) {
            var file = obj.files[0];
            var url = window.URL.createObjectURL(file);
            $("#img_add").attr("src", url);
        }

        function changeImgModify(obj) {
            var file = obj.files[0];
            var url = window.URL.createObjectURL(file);
            $("#img_modify").attr("src", url);
        }
        
        function addType() {
            // var name = $("#name_add").textbox("getValue");
            // var file
            // 获取form表单对象, 要DOM对象
            var form_data = $('#frm_add')[0];
            // // 创建表单对象
            var formData = new FormData(form_data);

            $.ajax({
                url: "${pageContext.request.contextPath}/articletypes/addArticleType",
                data:formData,
                dataType: 'json',
                method: 'POST',
                cache: false,
                // 告诉jQuery不要设置contentType
                // 相当于enctype="multipart/form-data"
                processData: false,
                // // 告诉jQuery不要处理请求参数
                contentType: false,
                success: function (res) {
                    if (res.code == 200){
                        alert("上传文件成功!");
                    }
            }
            });
            $('#articlelist').datagrid("reload");
        }
        
        function modiftType() {
            var form_data = $('#frm_modify')[0];
            var formData = new FormData(form_data);

            $.ajax({
                url: "${pageContext.request.contextPath}/articletypes/modifyArticleType",
                data:formData,
                dataType: 'json',
                method: 'POST',
                cache: false,
                processData: false,
                contentType: false,
                success: function (res) {
                    if (res.code == 200){
                        alert("修改文件成功!");
                    }
                    $('#articlelist').datagrid("reload");
                }
            });

        }
    </script>
</head>
<body>
    <div id="tb" style="padding:3px">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
            onclick="javascript:$('#dd').dialog('open')">新增</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" id="article_type_modify">修改</a>
    </div>
    
    <table id="articlelist"></table>
    
    <div id="dd" style="padding-left: 20%;padding-top: 20px;">
        <form id="frm_add">
            <div style="margin-bottom:30px">
                <%--name="en.color"--%>
                <input class="easyui-textbox" name="name_add" id="name_add" style="width:70%;height: 30px;"
                    data-options="label:'类型名称：',labelWidth:70,required:true">
            </div>
            <div style="margin-bottom:30px">
                <table>
                    <tr>
                        <td valign="top">
                            <a href="javascript:;" class="file">选择封面图片
                                <input type="file" id="imgurl_add" name="imgurl_add" onchange="changeImgAdd(this);">
                            </a>
                        </td>
                        <td>
                            <img src="images/zwtp.png" id="img_add" style="width: 100px;height: 100px;" />
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>

    <div id="mm" style="padding-left: 20%;padding-top: 20px;">
        <form id="frm_modify">
            <div style="margin-bottom:30px">
                <input id="id_modify" name="id_modify" type="hidden">
                <input class="easyui-textbox" id="name_modify" name="name_modify" style="width:70%;height: 30px;"
                    data-options="label:'类型名称：',labelWidth:70,required:true">
            </div>
            <div style="margin-bottom:30px">
                <table>
                    <tr>
                        <td valign="top">
                            <a href="javascript:;" class="file">选择封面图片
                                <input type="file" id="imgurl_modify" name="imgurl_modify" onchange="changeImgModify(this);">
                            </a>
                        </td>
                        <td>
                            <img src="", id="img_modify" style="width: 100px;height: 100px;" />
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
    
</body>
</html>